import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

type Question = {
  dimension: string;
  title: string;
  subtitle: string;
  options: {
    text: string;
    subtext: string;
    value: string;
  }[];
};

function App() {
  const navigate = useNavigate();
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [answers, setAnswers] = useState<Record<string, string>>({});

  const questions: Question[] = [
    {
      dimension: '外向 (E) vs 内向 (I)',
      title: '如果有一整天自由时间，你会选择:',
      subtitle: '让我们了解你偏好的能量来源',
      options: [
        {
          text: '和朋友一起出去玩，行程满满 (E)',
          subtext: '你喜欢通过社交活动获得能量',
          value: 'E'
        },
        {
          text: '独处放松，享受个人时光 (I)',
          subtext: '你更喜欢通过独处来恢复能量',
          value: 'I'
        }
      ]
    },
    {
      dimension: '感觉 (S) vs 直觉 (N)',
      title: '当你遇到一个问题，你更常:',
      subtitle: '了解你处理信息的方式',
      options: [
        {
          text: '先观察客观信息、搜集数据再下判断 (S)',
          subtext: '你偏好具体和实际的信息',
          value: 'S'
        },
        {
          text: '直接思考整体思路或创造性解决方案 (N)',
          subtext: '你偏好抽象和创新的思维',
          value: 'N'
        }
      ]
    },
    {
      dimension: '思考 (T) vs 情感 (F)',
      title: '当朋友遇到困难时，你更倾向于:',
      subtitle: '了解你的决策方式',
      options: [
        {
          text: '给出理性建议或解决方案 (T)',
          subtext: '你倾向于用逻辑分析问题',
          value: 'T'
        },
        {
          text: '关注对方心情并给予情感支持 (F)',
          subtext: '你倾向于考虑人的感受',
          value: 'F'
        }
      ]
    },
    {
      dimension: '判断 (J) vs 感知 (P)',
      title: '如果有人临时邀请你去旅行，你的反应:',
      subtitle: '了解你的生活方式',
      options: [
        {
          text: '希望能提前规划好行程和预算，才愿意去 (J)',
          subtext: '你喜欢有计划和确定性',
          value: 'J'
        },
        {
          text: '觉得很刺激，马上就能出发 (P)',
          subtext: '你喜欢灵活和自发性',
          value: 'P'
        }
      ]
    }
  ];

  const handleAnswer = (value: string) => {
    setAnswers(prev => ({
      ...prev,
      [questions[currentQuestion].dimension]: value
    }));
    
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(prev => prev + 1);
    }
  };

  const progress = ((currentQuestion + 1) / questions.length) * 100;
  const currentQ = questions[currentQuestion];

  const handleNextQuestion = () => {
    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion(prev => prev + 1);
    } else {
      navigate('/question2');
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-pink-50 to-purple-50 flex items-center justify-center p-4">
      <div className="bg-white rounded-3xl shadow-xl p-8 w-full max-w-2xl">
        <div className="mb-8">
          <div className="flex items-center justify-between mb-2">
            <span className="text-sm text-gray-500">第 {currentQuestion + 1}/{questions.length} 维度</span>
          </div>
          <div className="w-full h-2 bg-gray-100 rounded-full">
            <div 
              className="h-full bg-pink-400 rounded-full transition-all duration-300"
              style={{ width: `${progress}%` }}
            />
          </div>
        </div>

        <h2 className="text-2xl font-bold mb-2">{currentQ.dimension}</h2>
        <p className="text-gray-500 mb-6">{currentQ.subtitle}</p>
        
        <h3 className="text-xl mb-6">{currentQ.title}</h3>

        <div className="space-y-4">
          {currentQ.options.map((option) => (
            <button
              key={option.value}
              onClick={() => handleAnswer(option.value)}
              className="w-full p-6 bg-gray-50 hover:bg-gray-100 rounded-xl transition-all text-left group"
            >
              <div className="flex items-center">
                <div className="w-6 h-6 rounded-full border-2 border-gray-300 group-hover:border-pink-400 mr-4" />
                <div>
                  <p className="font-medium mb-1">{option.text}</p>
                  <p className="text-sm text-gray-500">{option.subtext}</p>
                </div>
              </div>
            </button>
          ))}
        </div>

        <div className="flex justify-between mt-8">
          <button
            onClick={() => setCurrentQuestion(prev => Math.max(0, prev - 1))}
            disabled={currentQuestion === 0}
            className={`px-6 py-2 rounded-full ${
              currentQuestion === 0
                ? 'bg-gray-100 text-gray-400'
                : 'bg-gray-200 hover:bg-gray-300 text-gray-700'
            }`}
          >
            上一题
          </button>
          <button
            onClick={handleNextQuestion}
            className="px-6 py-2 rounded-full bg-pink-400 hover:bg-pink-500 text-white"
          >
            {currentQuestion === questions.length - 1 ? '下一页' : '下一题'}
          </button>
        </div>

        <p className="text-center text-gray-400 text-sm mt-6">
          选择最符合你日常生活的选项，不需要过多思考哦~
        </p>
      </div>
    </div>
  );
}

export default App;